<template>
  <el-dialog
    class="public-dialog"
    title="数据匹配详情"
    width="90%"
    :modelValue="modelValue"
    @close="handleClose"
    draggable
    align-center
  >
    <div class="main">
      <div class="main-l">
        <h1 class="text-[#FAAD14]">预报信息</h1>
        <div class="text">预报编号: {{ pre_data?.pre_no || "-" }}</div>
        <div class="text">
          合同协议号: {{ pre_data?.contract_number || "-" }}
        </div>
        <div class="text">成交方式: {{ pre_data?.sale_mode || "-" }}</div>
        <div class="text">申报日期: {{ pre_data?.declare_date || "-" }}</div>
        <div class="text">
          监管方式: {{ pre_data?.regulatory_approach || "-" }}
        </div>
        <div class="text">
          境内发货人: {{ pre_data?.domestic_consignors || "-" }}
        </div>
      </div>
      <div class="main-r">
        <h1 class="text-[#00AC76]">报关信息</h1>
        <div class="text">
          出口报关单号: {{ dm_data?.declare_number || "-" }}
        </div>
        <div class="text">
          出口合同号: {{ dm_data?.contract_number || "-" }}
        </div>
        <div class="text">成交方式: {{ dm_data?.sale_mode || "-" }}</div>
        <div class="text">出口日期: {{ dm_data?.out_date || "-" }}</div>
        <div class="text">
          监管方式: {{ dm_data?.regulatory_approach || "-" }}
        </div>
        <div class="text">
          境内发货人: {{ dm_data?.domestic_shipper || "-" }}
        </div>
      </div>
    </div>
    <div class="flex">
      <div class="flex-1 mr-[10px] w-[50%]">
        <vxe-grid v-bind="tableOptions" min-height="300px">
          <template #dm_status="{ row }">
            <div class="flex items-center">
              <SvgIcon
                icon-class="SuccessFilled"
                v-if="row?.dm_status == 1"
              ></SvgIcon>
              <div v-else-if="row?.dm_status == 0">'-'</div>
              <SvgIcon icon-class="HintFilled" v-else></SvgIcon>
              {{ row?.dm_status_text || "-" }}
            </div>
          </template>
          <template #xno_matched="{ row }">
            <template v-if="row?.dm_status == 1 || row?.dm_status == 0">
              {{ row?.xno_matched }}
            </template>
            <template v-else>
              <el-input-number
                v-model="row.xno_matched"
                :controls="false"
                class="w-full"
              ></el-input-number>
            </template>
          </template>
        </vxe-grid>
      </div>
      <div class="flex-1 w-[50%]">
        <vxe-grid v-bind="tableOptions1" min-height="300px"></vxe-grid>
      </div>
    </div>
    <template #footer>
      <div class="dialog-button">
        <el-button @click="handleClose(false)"> 关闭 </el-button>
        <el-button @click="save" type="primary" :loading="loading">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ElMessage } from "element-plus";
import SvgIcon from "@/components/SvgIcon/index.vue";
import { predictionUpdateXno } from "../../api/index";
const props = defineProps({
  modelValue: { type: Boolean, default: false },
  data: { type: Object, default: () => ({}) },
});
const { data } = toRefs(props);
const emit = defineEmits(["update:modelValue"]);
const pre_data = ref({});
const dm_data = ref({});
const loading = ref(false);
watch(
  () => data.value,
  (val) => {
    if (val) {
      dm_data.value = val?.dm_data?.head;
      pre_data.value = val?.pre_data?.head;
      tableOptions.data = val?.pre_data?.body;
      tableOptions1.data = val?.dm_data?.body;
    }
  },
  {
    deep: true,
  }
);

const save = async () => {
  let xnos = tableOptions.data?.map((item) => ({
    id: item.id,
    xno: item.xno_matched,
  }));
  try {
    loading.value = true;
    const res = await predictionUpdateXno({ xnos });
    if (res.code !== 200) {
      ElMessage.warning(res.message);
      return;
    }
    ElMessage.success("保存成功");
    handleClose(true);
  } catch (error) {
  } finally {
    loading.value = false;
  }
};

const handleClose = async (refresh) => {
  pre_data.value = {};
  dm_data.value = {};
  tableOptions.data = [];
  tableOptions1.data = [];
  await nextTick();
  emit("update:modelValue", false);
};
const tableOptions = reactive({
  round: true,
  columnConfig: {
    resizable: true,
  },
  data: [],
  columns: [
    {
      title: "#",
      type: "seq",
      width: 40,
    },
    {
      title: "商品编号",
      field: "goods_code",
    },
    {
      title: "商品名称",
      field: "goods_name",
    },
    {
      title: "规格型号",
      field: "specification",
      cellRender: { name: "arrMap" },
    },
    {
      title: "单位",
      field: "goods_unit",
    },
    {
      title: "数量",
      field: "goods_nums",
    },
    {
      title: "币制",
      field: "currency",
    },
    {
      title: "总价",
      field: "total_amount",
    },
    {
      title: "匹配结果",
      field: "",
      slots: { default: "dm_status" },
    },
    {
      title: "对应项号",
      slots: { default: "xno_matched" },
    },
  ],
});
const tableOptions1 = reactive({
  round: true,
  columnConfig: {
    resizable: true,
  },
  data: [],
  columns: [
    {
      title: "#项号",
      field: "xno",
      width: 60,
    },
    {
      title: "商品代码",
      field: "goods_code",
    },
    {
      title: "海关商品名称",
      width: 105,
      field: "goods_name",
    },
    {
      title: "规格型号",
      field: "specification",
    },
    {
      title: "成交单位",
      field: "goods_unit",
    },
    {
      title: "成交数量",
      field: "goods_nums",
    },
    {
      title: "成交货币",
      field: "currency",
    },
    {
      title: "成交总价",
      field: "total_amount",
    },
  ],
});
</script>
<style lang="scss" scoped>
.main {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding-top: 12px;
  padding-bottom: 12px;
  .main-l,
  .main-r {
    flex: 1;
    border-radius: 8px;
    padding: 8px;
  }
  .main-l {
    margin-right: 8px;
    background-color: #fef6e7;
  }
  .main-r {
    background-color: #e5f6f1;
  }
  h1 {
    font-size: 18px;
    font-weight: 500;
    line-height: 35px;
  }
  .text {
    line-height: 30px;
  }
}

.normal-text {
  background-color: #ffffff;
}
.error-text {
  background-color: #fce5e7;
}
</style>
